<template>
  <div class="help-container">
    <div class="help-content">
      <!-- 左侧导航菜单 -->
      <div class="help-nav">
        <div class="nav-item" v-for="(item, index) in menuItems" :key="index">
          <!-- <div class="nav-title" @click="toggleSubMenu(index)">
            {{ item.title }}
          </div> -->
          <div class="sub-menu">
            <router-link
                v-for="(subItem, subIndex) in item.subItems"
                :key="subIndex"
                :to="subItem.path"
                class="sub-item"
                :class="{ 'sub-itemActive': isActiveRoute(subItem.path) }"
            >
              {{ subItem.title }}
            </router-link>
          </div>
        </div>
      </div>

      <!-- 右侧内容区域 -->
      <div class="help-main">
        <router-view v-slot="{ Component }">
          <keep-alive>
            <component :is="Component" />
          </keep-alive>
        </router-view>
      </div>

    </div>
   
  </div>
</template>

<script setup lang="ts">
import HeaderTabs from '../../components/HeaderTabs/HeaderTabs.vue';
import { ref, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';

const route = useRoute();
const router = useRouter();

// 菜单数据结构
const menuItems = ref([
  {
    title: 'Returns/Refunds',
    isOpen: true,
    subItems: [
      { title: 'How do I return?', path: '/help/returns/how-to-return?key=how_to_return&title=How do I return?' },
      { title: 'Refunds information', path: '/help/returns/refunds-information?key=refunds_information&title=Refunds information' },
      { title: 'Key returns information', path: '/help/returns/key-returns-information?key=key_returns_information&title=Key returns information' },
      { title: 'I have a problem with my delivery', path: '/help/delivery/i-have-a-problem-with-my-delivery?key=i_have_a_problem_with_my_delivery&title=I have a problem with my delivery' },
      { title: 'Delivery key information', path: '/help/delivery/delivery-key-information?key=delivery_key_information&title=Delivery key information' },
      { title: 'Tracking my order', path: '/help/delivery/tracking-my-order?key=tracking_my_order&title=Tracking my order' },
      { title: 'Signing in to my account', path: '/help/account/signing-in-to-my-account?key=signing_in_to_my_account&title=Signing in to my account' },
      { title: 'I have forgotten my password', path: '/help/account/i-have-forgotten-my-password?key=i_have_forgotten_my_password&title=I have forgotten my password' },
      { title: 'Opening an account', path: '/help/account/opening-an-account?key=opening_an_account&title=Opening an account' },
      { title: 'Help with payments', path: '/help/payments/help-with-payments?key=help_with_payments&title=Help with payments' },
      { title: 'What payment methods can I use?', path: '/help/payments/what-payment-methods-can-i-use?key=what_payment_methods_can_i_use&title=What payment methods can I use?' },
      { title: 'Has my order gone through?', path: '/help/shopping/has-my-order-gone-through?key=has_my_order_gone_through&title=Has my order gone through?' },
      { title: 'Amend / cancel my order', path: '/help/shopping/amend-cancel-my-order?key=amend_cancel_my_order&title=Amend / cancel my order' },
      { title: 'Placing An Order', path: '/help/shopping/placing-an-order?key=placing_an_order&title=Placing An Order' },
      { title: 'I have a Complaint', path: '/help/other/i-have-a-complaint?key=i_have_a_complaint&title=I have a Complaint' },
      { title: 'Sizing Guides', path: '/help/other/sizing-guides?key=sizing_guides&title=Sizing Guides' },
      // { title: 'Contact Us', path: '/help/other/contact-us?key=Contact_Us&title=Contact Us' }
    ]
  },
  
]);
onMounted(() => {
  const currentPath = route.path;
  if (currentPath === '/help') {
    router.push(menuItems.value[0].subItems[0].path);
  } else {
    menuItems.value.forEach(item => {
      const hasActiveSubItem = item.subItems.some(subItem => subItem.path === currentPath);
      if (hasActiveSubItem) {
        item.isOpen = true;
      }
    });
  }
});
// const handleClick = (item: any) => {
//   router.push(item.path);

//   // 找到对应的导航项并展开
//   menuItems.value.forEach(menuItem => {
//     const hasSubItem = menuItem.subItems.some(subItem => subItem.path === item.path);
//     if (hasSubItem) {
//       menuItem.isOpen = true;
//     }
//   });
// }
// 切换子菜单显示状态
const toggleSubMenu = (index: number) => {
  menuItems.value.forEach((item, i) => {
    if (i === index) {
      item.isOpen = !item.isOpen;
    } else {
      item.isOpen = false;
    }
  });
};

// 添加路由匹配函数
const isActiveRoute = (path: string) => {
  const currentPath = route.path;
  const currentQuery = route.query;
  const pathWithoutQuery = path.split('?')[0];
  const currentPathWithoutQuery = currentPath.split('?')[0];

  return pathWithoutQuery === currentPathWithoutQuery;
};
</script>

<style scoped lang="scss">
.help-container {
  width: 100%;
  min-height: 100vh;
  background-color: #fff;
  padding: 20px 0;
  margin: 0 auto;
}

.help-content {
  width: 70%;
  padding: 20px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 192px 1fr;
  gap: 100px;
  
  @media (max-width: 1280px) {
    width: 90%;
    grid-template-columns: 1fr;
    gap: 10px;
  }
}

.help-nav {
  width: 392px;
  //超出省略号
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: wrap;
  font-family: Inter, Arial, Helvetica, sans-serif;
  // background-color: #f0f0f0;
  // padding: 10px;
  // border-radius: 4px;
  // margin-bottom: 10px;
  // border: 1px solid #ccc;
  // border-radius: 4px;
  // background-color: #fff;
  // padding: 10px;
  // border-radius: 4px;

  @media (max-width: 1280px) {
    width: 100%;
    margin-bottom: 10px;
  }
}

.nav-item {
  margin-bottom: 10px;
}

.nav-title {
  padding: 10px;
  cursor: pointer;
  font-weight: bold;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.sub-menu {
  margin-left: 10px;
  padding: 5px 0;
}

.sub-item {
  display: block;
  padding: 10px;
  cursor: pointer;
  margin: 5px 0;
  border-radius: 4px;
  text-decoration: none;
  color: inherit;
  border: 3px solid transparent;

  &:hover {
    //下划线
    text-decoration: underline;
  }
}

:deep(.sub-itemActive) {
  text-decoration: underline;
  background-color: #fff !important;
  font-weight: 600;
}

.help-main {
  background-color: #fff;
  padding: 20px 20px 20px 100px;
  border-radius: 4px;
  border-left: 1px solid #e0e0e0; 
  @media (max-width: 1280px) {
    padding: 15px;
  }
}

</style>
